import React from 'react';
import {
  Form, Input, Button, Checkbox
} from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import axios from 'axios';
import md5 from 'crypto-js/md5';
import Dialog from '../../components/Dialog';
import './login.css';

const NormalLoginForm = function (props) {
  console.log(props, 'loginnnnnnnnnnnnn');

  React.useEffect(() => {
    // 如果存在用户登录信息 则尝试跳转到主页面
    if (window.sessionStorage.token) {
      // window.location.href = '/';
    }
  }, []);

  const onFinish = (values) => {
    window.Notification.requestPermission();
    const { changeView } = props;
    const { username, password } = values;
    console.log(username, password);
    console.log('Received values of form: ', values);
    axios.put('/aiOps/user/session', {
      username,
      password: md5(password).toString()
    }).then((res) => {
      const { data } = res;

      console.log('Login success!', data);
      if (data.code === '0000') {
        const { username: user = '', nickname = '', roleMsg = '' } = data.data || {};
        window.sessionStorage.username = user;
        window.sessionStorage.nickname = nickname;
        window.sessionStorage.roleMsg = roleMsg;
        window.sessionStorage.loginStatus = 'login';

        changeView('/main');
      }
    }).catch((error) => {
      console.log(error);
    });
  };

  return (
    <div className="login">
      <div className="content">
        <div className="title">CETC统一监控</div>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{
            remember: true
          }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            // help="请输入英文格式及数字用户名"
          // validateStatus="error"
            rules={[
              {
                required: true,
                message: '请输入用户名!'
              }
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入用户密码!'
              }
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
            />
          </Form.Item>
          {/* <Form.Item> */}
          {/* <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>Remember me</Checkbox>
            </Form.Item> */}
          {/* <a className="login-form-forgot" href="">
            Forgot password
          </a> */}
          {/* </Form.Item> */}
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登陆
            </Button>
          </Form.Item>
        </Form>
      </div>

    </div>
  );
};

export default NormalLoginForm;
